<template>
    <div class="goodsField">
        <div class="custom-item">
            <a-row type="flex" justify="space-between">
                <a-col class="title" :span="20">
                    <div class="custom-title">
                        商品字段配置
                        <a-tooltip>
                            <template #title>商品字段配置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip></div
                ></a-col>
                <a-col class="desc" :span="2"> <a-checkbox v-model:checked="checked">商品列表显示字段</a-checkbox> </a-col>
            </a-row>
            <!-- isSelect是否选中   isDefault-->

            <a-row :gutter="[16, 16]" style="margin-top: 15px">
                <black v-for="(item, index) in skuDictList" :key="index">
                    <a-col :span="1.5" v-if="checked ? item.isDefault : true" :class="item.type !== '0' && isEdit ? 'shake' : ''">
                        <a-button
                            :key="index"
                            :type="item.isSelect && isEdit && item.type !== '0' ? 'dashed' : item.isSelect ? 'primary' : ''"
                            :class="!item.isUpdate ? 'btnDisabled' : ''"
                            @click="handBtnFun(item)"
                            :danger="item.type !== '0' && isEdit"
                        >
                            {{ item.name }}
                        </a-button>
                        <CloseCircleOutlined @click="deleteItem(item)" v-if="item.type !== '0' && isEdit" class="icon" />
                    </a-col>
                </black>

                <a-col class="font-icon" :span="1.5" @click="visible = true">
                    <PlusOutlined />
                </a-col>
                <a-col
                    class="font-icon"
                    :span="1.5"
                    @click="isEdit = !isEdit"
                    :class="isEdit ? 'isEdit' : ''"
                    v-if="!checked && isEditFun()"
                >
                    <EditOutlined />
                </a-col>
            </a-row>
        </div>

        <a-modal v-model:visible="visible" title="新增商品字段" @ok="handleOk">
            <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="选择类型" name="type">
                    <a-radio-group @change="handleTypeChange" v-model:value="formState.dataType">
                        <a-radio :value="1">数字字段</a-radio>
                        <a-radio :value="2">文本字段</a-radio>
                        <a-radio :value="3">日期字段</a-radio>
                        <a-radio :value="4">时间字段</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="字段名称" name="name">
                    <a-input placeholder="字段名称" v-model:value="formState.name" />
                </a-form-item>
                <a-form-item label="字段code" name="code">
                    <a-input-number
                        placeholder="字段code"
                        v-if="formState.dataType == 1"
                        v-model:value="formState.code"
                        :min="0"
                    />
                    <a-input placeholder="字段code" v-if="formState.dataType == 2" v-model:value="formState.code" />
                    <a-date-picker
                        v-if="formState.dataType == 3"
                        v-model:value="formState.code"
                        type="date"
                        placeholder="请输入值"
                        style="width: 100%"
                    />
                    <a-time-picker v-if="formState.dataType == 4" v-model:value="formState.code" valueFormat="HH:mm:ss" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { getSkuDict, addSkuDict, editSkuDict, deleteSkuDict, getSkuDictChange } from '@/api/goods';
import { message, Modal } from 'ant-design-vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, UnwrapRef, onMounted, reactive, ref } from 'vue';
interface FormState {
    dataType: number;
    description: string;
    enName: string;
    isDefault: number;
    name: string;
    merchantCode: string;
    type: number;
}
export default defineComponent({
    components: { QuestionCircleOutlined },

    setup() {
        let skuDictList = ref<any[]>([]);
        console.log(skuDictList);
        const checked = ref(false);

        const visible = ref(false);

        const isEdit = ref(false);

        const formRef = ref();

        const rules = {
            code: [{ required: true, message: '请输入字段名称', trigger: 'change' }],
            name: [{ required: true, message: '请输入字段值', trigger: 'change' }],
        };
        const formState: UnwrapRef<FormState> = reactive({
            dataType: 2,
            description: '',
            enName: '',
            isDefault: 0,
            name: '',
            merchantCode: '',
            type: 1,
        });

        const getSkuDictList = async () => {
            const res = await getSkuDict();
            console.log(res);
            skuDictList.value = res;
        };

        const handleTypeChange = () => {
            formState.name = '';
        };
        // 表单提交
        const handleOk = () => {
            formRef.value.validate().then(async () => {
                await addSkuDict({ ...formState });
                getSkuDictList();
                message.success('添加成功');
                visible.value = false;
            });
        };
        const handleSetDefault = async (index: number) => {
            skuDictList.value[index]!.isDefault = !skuDictList.value[index]!.isDefault;
            await editSkuDict({ id: skuDictList.value[index].id, isDefault: skuDictList.value[index].isDefault ? 1 : 0 });
            message.success('设置成功');
        };

        const deleteItem = async (item: any) => {
            Modal.confirm({
                title: '是否确定删除?',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk: async () => {
                    await deleteSkuDict([item.id]);
                    message.success('删除成功');
                    getSkuDictList();
                    isEdit.value = false;
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        };
        onMounted(() => {
            getSkuDictList();
        });
        const handBtnFun = (item: any) => {
            getSkuDictChange(item.id).then((res) => {
                getSkuDictList();
            });
        };
        const isEditFun = () => {
            let falg = false;
            for (let i = 0; i < skuDictList.value.length; i++) {
                if (skuDictList.value[i].type !== '0') {
                    falg = true;
                    break;
                } else {
                    falg = false;
                }
            }
            return falg;
        };
        return {
            skuDictList,
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            formState,
            checked,
            visible,
            formRef,
            rules,
            handleTypeChange,
            handleSetDefault,
            handleOk,
            isEdit,
            deleteItem,
            handBtnFun,
            isEditFun,
        };
    },
});
</script>

<style lang="scss">
@keyframes shake-base {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    2% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
    }
    4% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    6% {
        transform: translate(0.5px, 0.5px) rotate(-1.5deg);
    }
    8% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    10% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    12% {
        transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
    }
    14% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    16% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    18% {
        transform: translate(0.5px, -0.5px) rotate(-0.5deg);
    }
    20% {
        transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
    }
    22% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    24% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }
    26% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    28% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    30% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    32% {
        transform: translate(0.5px, -0.5px) rotate(-0.5deg);
    }
    34% {
        transform: translate(0.5px, -0.5px) rotate(-1.5deg);
    }
    36% {
        transform: translate(0.5px, -0.5px) rotate(-0.5deg);
    }
    38% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    40% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    42% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    44% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    46% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    48% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }
    50% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    52% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg);
    }
    54% {
        transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
    }
    56% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    58% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }
    60% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }
    62% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
    }
    64% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    66% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
    }
    68% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    70% {
        transform: translate(0.5px, 0.5px) rotate(0.5deg);
    }
    72% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    74% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    76% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    78% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    80% {
        transform: translate(0.5px, -0.5px) rotate(0.5deg);
    }
    82% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
    }
    84% {
        transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
    }
    86% {
        transform: translate(0.5px, -0.5px) rotate(-1.5deg);
    }
    88% {
        transform: translate(-0.5px, -0.5px) rotate(-1.5deg);
    }
    90% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    92% {
        transform: translate(-0.5px, 0.5px) rotate(0.5deg);
    }
    94% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
    96% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg);
    }
    98% {
        transform: translate(-0.5px, -0.5px) rotate(0.5deg);
    }
}
.shake {
    animation: shake-base 3s both infinite;
    color: #1890ff;
    .ant-btn-dashed {
        border-color: #1890ff;
        opacity: 1;
    }
    .anticon {
        position: absolute;
        top: 0px;
        right: 2px;
    }
}

.btnDisabled {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: 0.6;
}
.isEdit {
    color: #1890ff;
}
.font-icon {
    align-items: center;
    display: flex;
    font-size: 18px;
    cursor: pointer;
}
</style>
